<template>
	<view class="lay-root">
	<vTable class="table-lay" :columns="headData" :list="contentData" :height="tableHeight"
		 selection="single"  @on-selection-change="onSelectionChange"
		  :row-class-name="rowClassNameFn"></vTable>
		
	</view>
</template>

<script>
	import vTable from "@/components/no-bad-table/table.vue";
	export default {
		watch:{
			tableHeight(val) {
				console.log(val)
			}
		},
		
		props: {
			infoData: {
				type: Object
			},
			
			tableHeight : {
				type: Number,
			},
			
			showType: {
				type: Number,
			}
		},

		components: {
			vTable
		},

		data() {
			return {
				headData:[],
				contentData: [],
				showType: "0"
			}
		},

		mounted() {
			this.headData = this.infoData.headData;
			
			for(let i = 0 ; i < 20; i++) {
				this.contentData.push(this.infoData.contentData[0])
			}
			// this.headData = this.infoData.contentData;
		},
		
		computed:{
			checkTableShowColum(inType) {
				if(inType.indexOf(this.showType) == -1)
					return true;
				return false;
			}
		},

		methods: {
			onSecondClick() {
				this.secondShowType++;
				if(this.secondShowType > 1)
					this.secondShowType = 0 ;
			},
			
			rowClassNameFn(row, index) {
				if (index % 2 == 0) {
					return 'table-row-singular';
				} else {
					return 'table-row-double';
				}
				return '';
			},
			
			onSelectionChange(e) {
				
			},
		}
	}
</script>

<style lang="scss">
	.lay-root {
		padding: 15upx;
		background-color: #fff;
	}
	
	.table-lay {
		// height: 100%;
	}
	
	.table-row-singular {
		font-size: 20upx;
		font-weight: normal;
		border: none;
		padding: 10upx;
		background-color: #0ffff0;
	}
	
	.table-row-double {
		font-size: 20upx;
		font-weight: normal;
		border: none;
		padding: 10upx;
		background-color: #0ff00f;
	}

</style>
